<html>
    <head>
        <meta charset="utf-8">
        <title>使用</title>
    </head>
    <body>
        <script src="jquery-3.7.1.min.js"></script>

        <div id="myDiv1">div1</div>
        <div id="myDiv2">div2</div>

    </body>
    <script>
        /*
            创建元素和添加元素
                创建元素
                    $("内容")
                添加元素
                    1.前追加子元素
                        指定元素.prepend(内容) 在指定元素内部的最前面添加内容 内容可以是字符串, HTML元素, jQuery对象
                        $(内容).prependTo(指定元素) 在指定元素内部的最前面添加内容 内容可以是字符串, HTML元素, jQuery对象

                    2.后追加子元素
                        指定元素.append(内容) 在指定元素内部的最后面添加内容 内容可以是字符串, HTML元素, jQuery对象
                        $(内容).appendTo(指定元素) 在指定元素内部的最后面添加内容 内容可以是字符串, HTML元素, jQuery对象

                    3.在指定元素之后添加元素
                        指定元素.after(内容) 在指定元素之后添加内容 内容可以是字符串, HTML元素, jQuery对象
                        $(内容).insertAfter(指定元素) 在指定元素之后添加内容 内容可以是字符串, HTML元素, jQuery对象

                    4.在指定元素之前添加元素
                        指定元素.before(内容) 在指定元素之前添加内容 内容可以是字符串, HTML元素, jQuery对象
                        $(内容).insertBefore(指定元素) 在指定元素之前添加内容 内容可以是字符串, HTML元素, jQuery对象

                    
                    在添加元素时，如果元素本身不存在(新建的元素)，此时会将元素追加到指定位置
                    如果元素本身存在(已有元素)，会将原来元素直接剪切设置到指定位置
        */

        // 创建一个新的<p>元素
        var newParagraph = $("<p>这是一个新段落。</p>");

        // 1. 前追加子元素
        $("#myDiv1").prepend("<span>这是在div1内部最前面的内容。</span>");
        $("<span>这是通过prependTo方法添加的内容。</span>").prependTo("#myDiv1");

        // 2. 后追加子元素
        $("#myDiv1").append("<span>这是在div1内部最后面的内容。</span>");
        $("<span>这是通过appendTo方法添加的内容。</span>").appendTo("#myDiv1");

        // 3. 在指定元素之后添加元素
        $("#myDiv1").after("<div class='newDiv'>这是在div1之后添加的新div。</div>");
        $("<div class='newDiv'>这是通过insertAfter方法添加的新div。</div>").insertAfter("#myDiv1");

        // 4. 在指定元素之前添加元素
        $("#myDiv1").before("<div class='newDiv'>这是在div1之前添加的新div。</div>");
        $("<div class='newDiv'>这是通过insertBefore方法添加的新div。</div>").insertBefore("#myDiv1");

        // 作为额外的示例，我们将之前创建的<p>元素添加到#myDiv2之后
        newParagraph.insertAfter("#myDiv2");


           // 创建一个新元素
           var newElement = $("<p>这是一个新创建的段落。</p>");

            // 1. 添加新创建的元素到 #targetDiv 内部最后面
            $("#targetDiv").append(newElement);
            console.log("新创建的元素已添加到 #targetDiv。");

            // 2. 将已存在的元素 #existingParagraph 移动到 #targetDiv 内部最前面
            $("#targetDiv").prepend($("#existingParagraph"));
            console.log("已存在的元素 #existingParagraph 已移动到 #targetDiv 内部最前面。");

            // 3. 尝试再次将已存在的元素 #existingParagraph 移动到 #targetDiv 之后
            $("#existingParagraph").insertAfter("#targetDiv");
            console.log("已存在的元素 #existingParagraph 已移动到 #targetDiv 之后。");

            // 注意：在第2步和第3步之间，#existingParagraph 只会在DOM中出现一次，
            // 它先是被移动到了 #targetDiv 的内部最前面，然后又被移动到了 #targetDiv 之后。
            // 这种行为类似于“剪切”和“粘贴”，而不是复制。

            // 4. 尝试将新创建的元素 newElement 再次添加到 #targetDiv 之后
            newElement.insertAfter("#targetDiv");
            console.log("新创建的元素 newElement 已再次添加到 #targetDiv 之后。");

            // 注意：newElement 是新创建的元素，因此它可以被多次添加到DOM中不同的位置，
            // 每次调用添加方法都会创建一个新的实例并插入到指定位置。
        </script>
</html>